<template>
	<view class="content">
		<view class="l-fixed">
			<!-- #ifndef MP-WEIXIN -->
			<view class="l-status"></view>
			<!-- #endif -->
			<!-- l-head -->
			<view class="l-head">
				<view class="l-search" @tap="navtoSearch">
					<image class="l-icon-search" src="../../static/l-icon-search.png" mode=""></image>
					<input type="text" class="l-search-input" disabled="" value="" placeholder="精彩热搜：金光布袋戏《羽国志异》"
						placeholder-class="l-holder" />
				</view>
			</view>
		</view>

		<view class="l-placeholder"></view>

		<view class="l-body l-clear-both">
			<view class="l-li" v-for="(item, key) in bookList" :key="key" @tap="navtoDetail(item)">
				<!-- 封面图片及其删除图标的容器，添加相对定位 -->
				<view class="l-li-img-container" @tap="navtoDetail(item)">
					<image class="l-li-img" :src="item.coverImg" mode="aspectFill"></image>
					<!-- 删除图标，添加绝对定位 -->
					<view class="l-li-delete" @tap.stop="deleteBook(item.id)">
						<image class="l-icon-delete" src="../../static/HM-search/delete.png" mode="aspectFit"></image>
					</view>
				</view>
				<view class="l-li-txt">
					{{ item.name }}
				</view>
			</view>
			<view class="l-add">
				<view class="l-add-view">
					<image class="l-icon-add" src="../../static/l-icon-add.png" mode="aspectFit"></image>
				</view>
			</view>
		</view>
	</view>
</template>

<script>
	import Cookies from 'js-cookie';
	import config from '@/utils/config.js';
	export default {
		data() {
			return {
				bookList: [], // 用于存储从后端获取的书籍列表
				title: 'Hello'
			}
		},
		onLoad() {
			this.fetchBookList();
		},
		methods: {
			fetchBookList() {
				// 从Cookie获取token
				const token = Cookies.get('token');
				if (!token) {
					uni.hideLoading();
					uni.showToast({
						icon: 'error',
						title: '未获取到有效token，请先登录'
					});
					return;
				}
				uni.request({
					url: `${config.apiBaseUrl}/BookCollection/list`, // 后端数据接口
					header: {
						'Content-Type': 'application/json',
						'token': token
					},
					data: {
						'collectionId': 1
					},
					method: 'GET', // 请求方法
					success: (res) => {
						//console.log(res)
						if (res.statusCode === 200 && res.data) {
							if (res.data.data === null) {
								uni.showToast({
									icon: 'success',
									title: '你的书架为空，快去添加吧'
								});
							}
							this.bookList = res.data.data;
						} else {
							uni.showToast({
								icon: 'error',
								title: '获取用户信息失败，请检查网络或稍后重试'
							});
						}
					},
					fail: (err) => {
						uni.showToast({
							icon: 'error',
							title: '获取用户信息失败，请检查网络或稍后重试'
						});
					}
				});
			},
			navtoDetail(item) {
				// 假设每个书籍项有一个唯一标识符，如 id，可以传递给详情页
				uni.navigateTo({
					url: `/pages/detail/detail?bookId=${item.id}` // 根据实际后端返回的数据结构修改
				});
			},
			navtoSearch() {
				uni.navigateTo({
					url: `/pages/HM-search/HM-search`
				});
			},
			deleteBook(bookId) {
				const token = Cookies.get('token');
				if (!token) {
					uni.showToast({
						icon: 'error',
						title: '未获取到有效token，请先登录'
					});
					return;
				}
				uni.showLoading({
					title: '删除中...'
				});
				uni.request({
					url: `${config.apiBaseUrl}/BookCollection/del`, // 后端删除数据接口
					header: {
						'Content-Type': 'application/json',
						'token': token
					},
					data: {
						'bookId': bookId
					},
					method: 'DELETE', // 请求方法
					success: (res) => {
						console.log(res)
						uni.hideLoading();
						if (res.statusCode === 200 && res.data.code === 1) {
							// 从bookList中移除已删除的书籍
							this.bookList = this.bookList.filter(book => book.id !== bookId);
							uni.showToast({
								icon: 'success',
								title: '删除成功'
							});
						} else {
							uni.showToast({
								icon: 'error',
								title: '删除失败，请稍后再试'
							});
						}
					},
					fail: (err) => {
						uni.hideLoading();
						uni.showToast({
							icon: 'error',
							title: '删除失败，请检查网络或稍后重试'
						});
					}
				});
			}
		}
	}
</script>

<style scoped>
	.l-li-img-container {
		position: relative;
		/* 设定为相对定位，作为其内部绝对定位元素的参考 */
		display: inline-block;
		/* 使容器能够依据内容自适应大小，同时保持块级元素的布局特性 */
		width: 100%;
		/* 确保容器宽度与父元素一致 */
	}

	.l-li-delete {
		position: absolute;
		/* 设定为绝对定位 */
		top: 5px;
		/* 根据实际需求微调顶部偏移 */
		right: 10px;
		/* 根据实际需求微调右侧偏移 */
		width: 20px;
		/* 设定删除图标的宽度 */
		height: 10px;
		/* 设定删除图标的高度 */
		/* background-color: rgb(255, 0, 0, 0.5); */
		/* 可选：为删除图标添加半透明红色背景，便于调试定位 */
	}

	.l-icon-delete {
		width: 80%;
		/* 图标宽度填满容器 */
		height: 80%;
		/* 图标高度填满容器 */
		object-fit: cover;
		/* 图片内容保持比例并填满容器，但注意在某些环境下可能不支持该属性 */
	}

	.l-li-delete {
		position: absolute;
		/* 绝对定位 */
		top: 10px;
		/* 根据需要调整顶部偏移量 */
		right: 10px;
		/* 根据需要调整右侧偏移量 */
		width: 30px;
		/* 根据图标大小设置宽度 */
		height: 30px;
		/* 根据图标大小设置高度 */
	}

	.l-icon-delete {
		width: 80%;
		/* 图标宽度占满容器 */
		height: 80%;
		/* 图标高度占满容器 */
		object-fit: cover;
		/* 图片内容保持比例并填满容器 */
	}

	.l-body {
		padding: var(--pad-lr) 0 var(--pad-lr) var(--pad-lr);
	}

	.l-ul {
		display: flex;
		align-items: center;
		justify-content: space-between;
		padding-bottom: 32rpx;
	}

	.l-add,
	.l-li {
		width: 28%;
		float: left;
		height: 392rpx;
		margin-right: 5%;
		margin-bottom: 32rpx;
	}

	.l-li {
		text-align: center;
	}

	.l-add-view,
	.l-li-img {
		display: block;
		/* 确保图片作为块级元素显示 */
		width: 100%;
		height: 300rpx;
		border-radius: 10rpx;
		margin-bottom: 8rpx;
	}

	.l-add-view {
		box-sizing: border-box;
		display: flex;
		border: 6rpx solid rgba(126, 127, 148, 1);
		align-items: center;
		justify-content: center;
	}

	.l-icon-add {
		width: 36rpx;
		height: 36rpx;
	}

	.l-li-txt {
		padding: 0 10rpx;
		display: -webkit-box;
		-webkit-box-orient: vertical;
		-webkit-line-clamp: 2;
		overflow: hidden;
	}
</style>